<template>
  <div style="position: relative;">
    <LogoSvg alt="logo"/>
    <svg
      v-if="nameplate"
      :width="nameplate.width"
      :height="nameplate.height"
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 -5 60 30"
    >
      <g>
        <text
          v-for="(item, index) in nameplate.text"
          :key="index"
          :x="item.x"
          :y="item.y"
          :font-size="item.fontSize"
          :text-anchor="item.textAnchor"
          :text-transform="item.textTransform"
          :text-shadow="item.textShadow"
          :fill="item.fill"
          :stroke="item.stroke"
          :stroke-width="item.strokeWidth"
          :stroke-dasharray="item.strokeDasharray"
        >
          {{ nameplate.title }}
          <animate
            :attributeName="item.animate.attributeName"
            :begin="item.animate.begin"
            :dur="item.animate.dur"
            :from="item.animate.from"
            :to="item.animate.to"
            :repeatCount="item.animate.repeatCount"
          />
        </text>
      </g>
    </svg>
  </div>
</template>

<script>
import LogoSvg from '@/assets/logo/white-rose64.svg?inline'
// import LogoSvg from '@/assets/yellow-rose-logo.svg?inline'

export default {
  name: 'Logo',
  components: {
    LogoSvg
  },
  data(){
    return {
      nameplate: {
        title: 'NBlog', // 凉风有信
        width: '60px', // 86px
        height: '60px', // 32px
        text: [
          {
            fontSize: '20',
            textAnchor: 'middle',
            x: '50%',
            y: '50%',
            textTransform: 'uppercase',
            fill: 'none',
            stroke: '#000000',
            textShadow: '0 0 1px #3498db',
            strokeWidth: '1px',
            strokeDasharray: '90 310',
            animate: {
              attributeName: 'stroke-dashoffset',
              begin: '-1.5s',
              dur: '6s',
              from: '0',
              to: '-400',
              repeatCount: 'indefinite',
            },
          },
          {
            fontSize: '20',
            textAnchor: 'middle',
            x: '50%',
            y: '50%',
            textTransform: 'uppercase',
            fill: 'none',
            stroke: '#36320b',
            textShadow: '0 0 1px #f39c12',
            strokeWidth: '1px',
            strokeDasharray: '90 310',
            animate: {
              attributeName: 'stroke-dashoffset',
              begin: '-3s',
              dur: '6s',
              from: '0',
              to: '-400',
              repeatCount: 'indefinite',
            },
          },
          {
            fontSize: '20',
            textAnchor: 'middle',
            x: '50%',
            y: '50%',
            textTransform: 'uppercase',
            fill: 'none',
            stroke: '#363329',
            textShadow: '0 0 1px #e74c3c',
            strokeWidth: '1px',
            strokeDasharray: '90 310',
            animate: {
              attributeName: 'stroke-dashoffset',
              begin: '-4.5s',
              dur: '6s',
              from: '0',
              to: '-400',
              repeatCount: 'indefinite',
            },
          },
          {
            fontSize: '20',
            textAnchor: 'middle',
            x: '50%',
            y: '50%',
            textTransform: 'uppercase',
            fill: 'none',
            stroke: '#123613',
            textShadow: '0 0 1px #9b59b6',
            strokeWidth: '1px',
            strokeDasharray: '90 310',
            animate: {
              attributeName: 'stroke-dashoffset',
              begin: '-6s',
              dur: '6s',
              from: '0',
              to: '-400',
              repeatCount: 'indefinite',
            },
          },
        ],
      }
    }
  }
}
</script>
